<script>
import axios from 'axios'; // 引入 axios 用于发送 HTTP 请求

export default {
  name: 'SetRemarkView',
  data() {
    return {

      remark: '', // 备注内容

    }
  },
  methods: {

    goBack() {
      // 返回上一页
      this.$router.push({ name: 'ChatSettings' });
    },
    saveRemark(remark) {
      // 保存备注逻辑
      if (this.remark.trim()) {
        console.log('备注内容:', this.remark);
        // 这里可以添加保存到本地存储或发送到服务器的逻辑
        this.$message.success('备注保存成功！');
        // 延时跳转
        setTimeout(() => {
          this.$router.push({ name: 'ChatSettings' , params: {
            doctorName: JSON.parse(localStorage.getItem("doctorName")),
              position: JSON.parse(localStorage.getItem("position")),
              remark: "("+remark+")" }});
        }, 1800);
      } else {
        alert('请输入备注内容！');
      }
    },

  },
  created() {

  }


}

</script>

<template>
  <div class="remark-settings">
    <!-- 头部 -->
    <div class="header">
      <div class="header-left" @click="goBack">
        <svg class="back-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
          <path d="M333.994667 469.333333H853.333333v85.333334H333.994667l228.864 228.864-60.330667 60.330666L170.666667 512l331.861333-331.861333 60.330667 60.330666L333.994667 469.333333z" fill="#000000" p-id="2527"></path>
        </svg>
      </div>
      <div class="header-middle">
        <span class="title">设置备注</span>
      </div>
      <div class="header-right">
        <button class="save-button" @click="saveRemark(remark)">保存</button>
      </div>
    </div>

    <!-- 备注内容 -->
    <div class="remark-content">
      <div class="remark-label">
        <span>备注</span>
        <input type="text" v-model="remark" placeholder="请填写备注内容" class="remark-input" />
      </div>
    </div>



  </div>
</template>

<style scoped>

.remark-settings {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.header-middle {
  flex: 1;
  text-align: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.header-right {
  display: flex;
  align-items: center;
}

.save-button {
  padding: 8px 16px;
  background-color: #007aff;
  color: #ffffff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.save-button:hover {
  background-color: #005bb5;
}

.remark-content {
  margin-top: 20px;
}

.remark-label {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.remark-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 8px;
}

</style>